<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教材版本列表</title>
    <link href="../assets/css/tailwind.css" rel="stylesheet">
    <link href="../assets/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        neutral: '#64748B',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-hover {
                @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-50 transition-all duration-300">
        <div class="container mx-auto px-0 py-3 flex items-center justify-between">
            <div class="flex items-center space-x-2">
                <button id="sidebar-toggle" class="lg:hidden text-gray-500 hover:text-primary transition-colors">
                    <i class="fa fa-bars text-xl"></i>
                </button>
                <h1 class="text-xl font-bold text-primary flex items-center">
                    <i class="fa fa-book mr-2"></i>
                    <span>睿途题库</span>
                </h1>
            </div>

            <div class="hidden md:flex items-center space-x-6">
                <!-- 控制面板 -->
                <div class="relative group">
                    <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                        <i class="fa fa-tachometer mr-1"></i> 控制面板
                        <i class="fa fa-angle-down ml-1 text-xs"></i>
                    </a>
                    <div
                        class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                        <div class="py-2">
                            <a href="#"
                                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-dashboard mr-2"></i> 仪表盘
                            </a>
                            <a href="#"
                                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-chart-line mr-2"></i> 数据概览
                            </a>
                            <a href="#"
                                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-tasks mr-2"></i> 任务管理
                            </a>
                        </div>
                    </div>
                </div>

                <!-- 教材管理 -->
                <div class="relative group">
                    <a href="#" class="text-gray-600 font-medium border-b-2 border-primary pb-1 flex items-center">
                        <i class="fa fa-book mr-1"></i> 教材管理
                        <i class="fa fa-angle-down ml-1 text-xs"></i>
                    </a>
                    <div
                        class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                        <div class="py-2">
                            <a href="#"
                                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-list mr-2"></i> 版本管理
                            </a>
                            <a href="#"
                                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-sitemap mr-2"></i> 章节管理
                            </a>
                            <a href="#"
                                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-lightbulb-o mr-2"></i> 知识点管理
                            </a>
                            <a href="#" class="block px-4 py-2 text-sm text-primary bg-primary/10 font-medium">
                                <i class="fa fa-exchange mr-2"></i> 版本对比
                            </a>
                        </div>
                    </div>
                </div>

                <!-- 题库管理 -->
                <div class="relative group">
                    <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                        <i class="fa fa-database mr-1"></i> 题库管理
                        <i class="fa fa-angle-down ml-1 text-xs"></i>
                    </a>
                    <div
                        class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                        <div class="py-2">
                            <a href="#"
                                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-question-circle mr-2"></i> 题目管理
                            </a>
                            <a href="#"
                                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-tags mr-2"></i> 标签管理
                            </a>
                            <a href="#"
                                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-filter mr-2"></i> 筛选规则
                            </a>
                            <a href="#"
                                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-upload mr-2"></i> 批量导入
                            </a>
                        </div>
                    </div>
                </div>

                <!-- 组卷系统 -->
                <div class="relative group">
                    <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                        <i class="fa fa-files-o mr-1"></i> 组卷系统
                        <i class="fa fa-angle-down ml-1 text-xs"></i>
                    </a>
                    <div
                        class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                        <div class="py-2">
                            <a href="#"
                                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-magic mr-2"></i> 智能组卷
                            </a>
                            <a href="#"
                                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-edit mr-2"></i> 手动组卷
                            </a>
                            <a href="#"
                                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-copy mr-2"></i> 试卷模板
                            </a>
                            <a href="#"
                                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-history mr-2"></i> 历史试卷
                            </a>
                        </div>
                    </div>
                </div>

                <!-- 数据分析 -->
                <div class="relative group">
                    <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                        <i class="fa fa-bar-chart mr-1"></i> 数据分析
                        <i class="fa fa-angle-down ml-1 text-xs"></i>
                    </a>
                    <div
                        class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                        <div class="py-2">
                            <a href="#"
                                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-chart-pie mr-2"></i> 学习分析
                            </a>
                            <a href="#"
                                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-chart-bar mr-2"></i> 成绩统计
                            </a>
                            <a href="#"
                                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-chart-line mr-2"></i> 趋势分析
                            </a>
                            <a href="#"
                                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-file-text mr-2"></i> 报告生成
                            </a>
                        </div>
                    </div>
                </div>

                <!-- 系统设置 -->
                <div class="relative group">
                    <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                        <i class="fa fa-cog mr-1"></i> 系统设置
                        <i class="fa fa-angle-down ml-1 text-xs"></i>
                    </a>
                    <div
                        class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                        <div class="py-2">
                            <a href="#"
                                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-users mr-2"></i> 用户管理
                            </a>
                            <a href="#"
                                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-shield mr-2"></i> 权限设置
                            </a>
                            <a href="#"
                                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-database mr-2"></i> 数据备份
                            </a>
                            <a href="#"
                                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-cogs mr-2"></i> 系统配置
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="flex items-center space-x-4">
                <div class="relative">
                    <input type="text" placeholder="搜索教材、章节或知识点..."
                        class="pl-10 pr-4 py-2 rounded-full bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all w-40 lg:w-64">
                    <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                </div>

                <div class="relative">
                    <button class="text-gray-500 hover:text-primary transition-colors">
                        <i class="fa fa-bell text-xl"></i>
                        <span
                            class="absolute -top-1 -right-1 bg-danger text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">3</span>
                    </button>
                </div>

                <div class="flex items-center space-x-2 cursor-pointer group">
                    <img src="https://picsum.photos/id/64/40/40" alt="用户头像"
                        class="w-8 h-8 rounded-full object-cover border-2 border-transparent group-hover:border-primary transition-all">
                    <span class="hidden md:inline font-medium">张老师</span>
                    <i class="fa fa-angle-down text-gray-400 group-hover:text-primary transition-colors"></i>
                </div>
            </div>
        </div>
    </header>

    <main class="container mx-auto px-0 py-8">
        <div class="container mx-auto">
                <!-- 面包屑导航 -->
                <div class="mb-6 flex items-center text-sm">
                    <a href="#" class="text-gray-500 hover:text-primary">首页</a>
                    <i class="fa fa-angle-right mx-2 text-gray-400"></i>
                    <a href="#" class="text-gray-500 hover:text-primary">教材管理</a>
                    <i class="fa fa-angle-right mx-2 text-gray-400"></i>
                    <span class="text-primary font-medium">教材列表</span>
                </div>

        <!-- 页面标题 -->
        <div class="mb-8">
            <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-800">教材版本列表</h1>
            <p class="text-gray-600 mt-2">选择适合的教材版本开始学习</p>
        </div>

        <!-- 筛选栏 -->
        <div class="bg-white rounded-lg shadow-sm p-4 mb-8">
            <div class="flex flex-wrap gap-4">
                <div class="flex items-center">
                    <label class="text-gray-700 mr-2">学段:</label>
                    <select class="border border-gray-300 rounded-lg px-3 py-2 text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary/50">
                        <option value="">全部</option>
                        <option value="primary">小学</option>
                        <option value="junior">初中</option>
                        <option value="senior">高中</option>
                    </select>
                </div>
                
                <div class="flex items-center">
                    <label class="text-gray-700 mr-2">学科:</label>
                    <select class="border border-gray-300 rounded-lg px-3 py-2 text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary/50">
                        <option value="">全部</option>
                        <option value="chinese">语文</option>
                        <option value="math">数学</option>
                        <option value="english">英语</option>
                        <option value="physics">物理</option>
                        <option value="chemistry">化学</option>
                        <option value="biology">生物</option>
                        <option value="history">历史</option>
                        <option value="geography">地理</option>
                        <option value="politics">政治</option>
                    </select>
                </div>
                
                <div class="flex items-center">
                    <label class="text-gray-700 mr-2">版本:</label>
                    <select class="border border-gray-300 rounded-lg px-3 py-2 text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary/50">
                        <option value="">全部</option>
                        <option value="pep">人教版</option>
                        <option value="js">苏教版</option>
                        <option value="bj">北师大版</option>
                        <option value="hx">沪教版</option>
                        <option value="sd">鲁教版</option>
                    </select>
                </div>
                
                <div class="flex items-center ml-auto">
                    <label class="text-gray-700 mr-2">排序:</label>
                    <select class="border border-gray-300 rounded-lg px-3 py-2 text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary/50">
                        <option value="popular">人气优先</option>
                        <option value="newest">最新上线</option>
                        <option value="name">名称排序</option>
                    </select>
                </div>
            </div>
        </div>

        <!-- 教材版本列表 -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            <!-- 教材卡片 1 -->
            <div class="bg-white rounded-xl shadow-sm overflow-hidden card-hover border border-gray-100">
                <div class="relative h-48 overflow-hidden">
                    <img src="https://picsum.photos/seed/math1/400/300" alt="数学必修第一册封面" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                    <div class="absolute top-2 right-2 bg-primary text-white text-xs font-bold px-2 py-1 rounded">
                        人教版
                    </div>
                </div>
                <div class="p-5">
                    <div class="flex justify-between items-start mb-3">
                        <h3 class="text-lg font-semibold text-gray-800">数学必修第一册</h3>
                        <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">
                            高中
                        </span>
                    </div>
                    <p class="text-gray-600 text-sm mb-4 line-clamp-2">
                        本书涵盖集合与常用逻辑用语、一元二次函数、方程和不等式等内容，是高中数学的基础教材。
                    </p>
                    <div class="flex justify-between items-center">
                        <span class="text-gray-500 text-sm">
                            <i class="fa fa-users mr-1"></i> 25,342人正在使用
                        </span>
                        <button class="bg-primary hover:bg-primary/90 text-white px-3 py-1.5 rounded-lg text-sm font-medium transition-colors">
                            查看详情
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 教材卡片 2 -->
            <div class="bg-white rounded-xl shadow-sm overflow-hidden card-hover border border-gray-100">
                <div class="relative h-48 overflow-hidden">
                    <img src="https://picsum.photos/seed/chinese1/400/300" alt="语文必修上册封面" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                    <div class="absolute top-2 right-2 bg-primary text-white text-xs font-bold px-2 py-1 rounded">
                        人教版
                    </div>
                </div>
                <div class="p-5">
                    <div class="flex justify-between items-start mb-3">
                        <h3 class="text-lg font-semibold text-gray-800">语文必修上册</h3>
                        <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">
                            高中
                        </span>
                    </div>
                    <p class="text-gray-600 text-sm mb-4 line-clamp-2">
                        本书精选了古今中外的优秀文学作品，包括诗歌、散文、小说等多种体裁，注重培养学生的阅读理解和写作能力。
                    </p>
                    <div class="flex justify-between items-center">
                        <span class="text-gray-500 text-sm">
                            <i class="fa fa-users mr-1"></i> 23,105人正在使用
                        </span>
                        <button class="bg-primary hover:bg-primary/90 text-white px-3 py-1.5 rounded-lg text-sm font-medium transition-colors">
                            查看详情
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 教材卡片 3 -->
            <div class="bg-white rounded-xl shadow-sm overflow-hidden card-hover border border-gray-100">
                <div class="relative h-48 overflow-hidden">
                    <img src="https://picsum.photos/seed/english1/400/300" alt="英语必修第一册封面" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                    <div class="absolute top-2 right-2 bg-primary text-white text-xs font-bold px-2 py-1 rounded">
                        人教版
                    </div>
                </div>
                <div class="p-5">
                    <div class="flex justify-between items-start mb-3">
                        <h3 class="text-lg font-semibold text-gray-800">英语必修第一册</h3>
                        <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">
                            高中
                        </span>
                    </div>
                    <p class="text-gray-600 text-sm mb-4 line-clamp-2">
                        本书以主题为线索，编排了听、说、读、写等多种语言活动，帮助学生提高英语综合运用能力。
                    </p>
                    <div class="flex justify-between items-center">
                        <span class="text-gray-500 text-sm">
                            <i class="fa fa-users mr-1"></i> 24,876人正在使用
                        </span>
                        <button class="bg-primary hover:bg-primary/90 text-white px-3 py-1.5 rounded-lg text-sm font-medium transition-colors">
                            查看详情
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 教材卡片 4 -->
            <div class="bg-white rounded-xl shadow-sm overflow-hidden card-hover border border-gray-100">
                <div class="relative h-48 overflow-hidden">
                    <img src="https://picsum.photos/seed/physics1/400/300" alt="物理必修第一册封面" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                    <div class="absolute top-2 right-2 bg-primary text-white text-xs font-bold px-2 py-1 rounded">
                        人教版
                    </div>
                </div>
                <div class="p-5">
                    <div class="flex justify-between items-start mb-3">
                        <h3 class="text-lg font-semibold text-gray-800">物理必修第一册</h3>
                        <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">
                            高中
                        </span>
                    </div>
                    <p class="text-gray-600 text-sm mb-4 line-clamp-2">
                        本书主要讲述运动学和力学的基础知识，包括质点、参考系、位移、速度、加速度等基本概念。
                    </p>
                    <div class="flex justify-between items-center">
                        <span class="text-gray-500 text-sm">
                            <i class="fa fa-users mr-1"></i> 20,789人正在使用
                        </span>
                        <button class="bg-primary hover:bg-primary/90 text-white px-3 py-1.5 rounded-lg text-sm font-medium transition-colors">
                            查看详情
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 教材卡片 5 -->
            <div class="bg-white rounded-xl shadow-sm overflow-hidden card-hover border border-gray-100">
                <div class="relative h-48 overflow-hidden">
                    <img src="https://picsum.photos/seed/chemistry1/400/300" alt="化学必修第一册封面" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                    <div class="absolute top-2 right-2 bg-primary text-white text-xs font-bold px-2 py-1 rounded">
                        人教版
                    </div>
                </div>
                <div class="p-5">
                    <div class="flex justify-between items-start mb-3">
                        <h3 class="text-lg font-semibold text-gray-800">化学必修第一册</h3>
                        <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">
                            高中
                        </span>
                    </div>
                    <p class="text-gray-600 text-sm mb-4 line-clamp-2">
                        本书主要介绍化学科学的基本概念和研究方法，包括物质的量、离子反应、氧化还原反应等重要内容。
                    </p>
                    <div class="flex justify-between items-center">
                        <span class="text-gray-500 text-sm">
                            <i class="fa fa-users mr-1"></i> 19,567人正在使用
                        </span>
                        <button class="bg-primary hover:bg-primary/90 text-white px-3 py-1.5 rounded-lg text-sm font-medium transition-colors">
                            查看详情
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 教材卡片 6 -->
            <div class="bg-white rounded-xl shadow-sm overflow-hidden card-hover border border-gray-100">
                <div class="relative h-48 overflow-hidden">
                    <img src="https://picsum.photos/seed/biology1/400/300" alt="生物必修第一册封面" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                    <div class="absolute top-2 right-2 bg-primary text-white text-xs font-bold px-2 py-1 rounded">
                        人教版
                    </div>
                </div>
                <div class="p-5">
                    <div class="flex justify-between items-start mb-3">
                        <h3 class="text-lg font-semibold text-gray-800">生物必修第一册</h3>
                        <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">
                            高中
                        </span>
                    </div>
                    <p class="text-gray-600 text-sm mb-4 line-clamp-2">
                        本书以细胞是基本的生命系统为主线，介绍了细胞的分子组成、结构、代谢和增殖等内容。
                    </p>
                    <div class="flex justify-between items-center">
                        <span class="text-gray-500 text-sm">
                            <i class="fa fa-users mr-1"></i> 18,432人正在使用
                        </span>
                        <button class="bg-primary hover:bg-primary/90 text-white px-3 py-1.5 rounded-lg text-sm font-medium transition-colors">
                            查看详情
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 分页 -->
        <div class="flex justify-center mt-10">
            <nav class="inline-flex rounded-md shadow-sm" aria-label="Pagination">
                <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                    <span class="sr-only">上一页</span>
                    <i class="fa fa-chevron-left"></i>
                </a>
                <a href="#" aria-current="page" class="z-10 bg-primary text-white relative inline-flex items-center px-4 py-2 border border-primary text-sm font-medium">1</a>
                <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">2</a>
                <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">3</a>
                <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
                    ...
                </span>
                <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">8</a>
                <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">9</a>
                <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                    <span class="sr-only">下一页</span>
                    <i class="fa fa-chevron-right"></i>
                </a>
            </nav>
        </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white mt-12">
        <div class="container mx-auto px-4 py-12">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <div class="flex items-center space-x-2 mb-4">
                        <i class="fa fa-book text-primary text-2xl"></i>
                        <span class="text-xl font-bold">教材资源平台</span>
                    </div>
                    <p class="text-gray-400 text-sm">
                        提供全面的中小学教材资源，助力教师教学和学生学习。
                    </p>
                    <div class="flex space-x-4 mt-4">
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-weibo"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-wechat"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-qq"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h4 class="text-lg font-semibold mb-4">快速链接</h4>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="#" class="hover:text-white transition-colors">首页</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">教材列表</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">课程推荐</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">学习工具</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">关于我们</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-semibold mb-4">资源分类</h4>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="#" class="hover:text-white transition-colors">小学教材</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">初中教材</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">高中教材</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">教师用书</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">电子教案</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-semibold mb-4">联系我们</h4>
                    <ul class="space-y-2 text-gray-400">
                        <li class="flex items-start">
                            <i class="fa fa-map-marker mt-1 mr-2"></i>
                            <span>北京市海淀区中关村南大街5号</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-phone mr-2"></i>
                            <span>400-123-4567</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-envelope mr-2"></i>
                            <span>contact@textbook.com</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400 text-sm">
                <p>© 2025 教材资源平台 版权所有 | 京ICP备12345678号</p>
            </div>
        </div>
    </footer>
</body>
</html>